import React, {Component} from 'react'
import {CommonWrapper} from './styled'
import {Form, Input, Switch, Select, Button, Icon, InputNumber} from 'antd'
import {connect} from 'react-redux'
import {actionFunc} from './store'
import axios from 'axios'
import SubmitBtn from '@/components/SubmitBtn'


class Common extends Component {
    render() {
        const {getFieldDecorator} = this.props.form;
        const FormItem = Form.Item;
        const Option = Select.Option;
        const {formData, param, connectTypeValueForWeb, pppoeValidate, staticIpValidate, dhcpValidate, enabled} = this.props;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
        };
        const pppoeContent = (
            <div>
                <FormItem
                    {...formItemLayout}
                    label="Service"
                >
                    {getFieldDecorator('pppoe.service', {
                        initialValue: `${formData.getIn(['pppoe', 'service']) || ''}`,
                        rules: [{}],
                    })(
                        <Input className='input-style'/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="userName"
                >
                    {getFieldDecorator('pppoe.userName', {
                        initialValue: `${formData.getIn(['pppoe', 'userName']) || ''}`,
                        rules: [
                            {required: pppoeValidate, message: 'Please input a userName',},
                            {whitespace: true, message: 'White Space is not allowed',}
                        ],
                    })(
                        <Input className='input-style'/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="Password"
                >
                    {getFieldDecorator('pppoe.password', {
                        initialValue: `${formData.getIn(['pppoe', 'password']) || ''}`,
                        rules: [{
                            required: pppoeValidate,
                            message: 'Please select a type',
                        },
                            {whitespace: true, message: 'White Space is not allowed',}
                        ],
                    })(
                        <Input className='input-style'/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="Connect Status"
                >
                    {getFieldDecorator('pppoe.connectStatus', {})(
                        <span className="ant-form-text">
                            {formData.getIn(['pppoe', 'up']) ?
                                'Online'
                                :
                                'Offline'
                            }
                        </span>
                    )}
                </FormItem>
            </div>
        )
        const staticIpContent = (
            <div>
                <FormItem
                    {...formItemLayout}
                    label="Ip Address"
                >
                    {getFieldDecorator('static.ipAddress', {
                        initialValue: `${formData.getIn(['static', 'ipAddress']) || ''}`,
                        rules: [{
                            required: staticIpValidate,
                            message: 'Please select a type',
                        },
                            {whitespace: true, message: 'White Space is not allowed',}
                        ],
                    })(
                        <Input className='input-style'/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="Mask"
                >
                    {getFieldDecorator('static.netMask', {
                        initialValue: `${formData.getIn(['static', 'netMask']) || ''}`,
                        rules: [{
                            required: staticIpValidate,
                            message: 'Please select a type',
                        },
                            {whitespace: true, message: 'White Space is not allowed',}
                        ],
                    })(
                        <Input className='input-style'/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="Gateway"
                >
                    {getFieldDecorator('static.gateway', {
                        initialValue: `${formData.getIn(['static', 'gateway']) || ''}`,
                        rules: [{
                            required: staticIpValidate,
                            message: 'Please select a type',
                        },
                            {whitespace: true, message: 'White Space is not allowed',}
                        ],
                    })(
                        <Input className='input-style'/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="DNS Server 1"
                >
                    {getFieldDecorator('static.firstDNS', {
                        initialValue: `${formData.getIn(['static', 'firstDNS']) || ''}`,
                        rules: [
                            {whitespace: true, message: 'White Space is not allowed',}
                        ],
                    })(
                        <Input className='input-style'/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="DNS Server 2"
                >
                    {getFieldDecorator('static.secondDNS', {
                        initialValue: `${formData.getIn(['static', 'secondDNS']) || ''}`,
                        rules: [
                            {whitespace: true, message: 'White Space is not allowed',}
                        ],
                    })(
                        <Input className='input-style'/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="Connect Status"
                >
                    {getFieldDecorator('static.connectStatus', {})(
                        <span className="ant-form-text">
                            {formData.getIn(['static', 'up']) ?
                                'Online'
                                :
                                'Offline'
                            }
                        </span>
                    )}
                </FormItem>
            </div>
        )
        const dhcpContent = (
            <div>
                <FormItem
                    {...formItemLayout}
                    label="Connect Status"
                >
                    {getFieldDecorator('dhcp.connectStatus', {})(
                        <span className="ant-form-text">
                            {formData.getIn(['dhcp', 'up']) ?
                                'Online'
                                :
                                'Offline'
                            }
                        </span>
                    )}
                </FormItem>
            </div>
        )
        return (
            <CommonWrapper>
                <Form onSubmit={this.handleSubmit.bind(this)}>
                    <FormItem
                        {...formItemLayout}
                        label="Enable"
                    >
                        {getFieldDecorator('enabled', {
                            initialValue: enabled,
                            valuePropName: 'checked'
                        })(
                            <Switch
                                checkedChildren={<Icon type='check'/>}
                                unCheckedChildren={<Icon type='close'/>}
                            />
                        )}

                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="Connect-Type"
                    >
                        {getFieldDecorator('connectType', {
                            initialValue: `${formData.get('connectType') || ''}`,
                            rules: [{
                                required: true, message: 'Please select a type',
                            }],
                            onChange: this.props.handleConnectTypeChange.bind(this)
                        })(
                            <Select className='input-style'>
                                {param.get('connectType') && param.get('connectType').map((item) =>
                                    <Option value={item.get('id')} key={item.get('id')}>{item.get('name')}</Option>
                                )}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="Mac Address"
                    >
                        {getFieldDecorator('macAddress', {})(
                            <span className='ant-form-text'>{formData.get('macAddress')}</span>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="Vlan Tag"
                    >
                        {getFieldDecorator('vLan', {
                            initialValue: `${formData.get('vLan') || ''}`,
                            rules: [{
                                required: true, message: 'Please select a type',
                            }],
                        })(
                            <Input className='input-style'/>
                        )}
                        <span className="ant-form-text">(0 for no tag,2-4094 available)</span>
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="MTU"
                    >
                        {getFieldDecorator('MTU', {
                            initialValue: `${formData.get('MTU') || ''}`,
                            rules: [{
                                required: true, message: 'Please select a type',
                            }],
                        })(
                            <InputNumber min={576} max={1500} className='input-style'/>
                        )}
                        <span className="ant-form-text">(576-1500)</span>
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="Metric"
                    >
                        {getFieldDecorator('metric', {
                            initialValue: `${formData.get('metric') || ''}`,
                            rules: [{
                                required: true, message: 'Please select a type',
                            }],
                        })(
                            <InputNumber min={0} max={9999} className='input-style'/>
                        )}
                        <span className="ant-form-text">(0-9999)</span>
                    </FormItem>
                    {connectTypeValueForWeb === '1' && pppoeContent}
                    {connectTypeValueForWeb === '2' && staticIpContent}
                    {connectTypeValueForWeb === '3' && dhcpContent}
                    <FormItem wrapperCol={{span: 12, offset: 6}}>

                        {/*<Button type='primary' htmlType='submit'>Submit</Button>*/}
                        <SubmitBtn/>
                    </FormItem>
                </Form>
            </CommonWrapper>
        )
    }

    handleSubmit(e) {
        e.preventDefault();
        const allFields = [
            'pppoe.service',
            'pppoe.userName',
            'pppoe.password',
            'static.ipAddress',
            'static.connectStatus',
            'static.netMask',
            'static.gateway',
            'static.firstDNS',
            'static.secondDNS',
            'enabled',
            'connectType',
            'vLan',
            'MTU',
            'metric',

        ]
        this.props.form.validateFields(allFields, {force: true}, (err, values) => {
            if (!err) {
                switch (values.connectType) {
                    case '1':
                        delete values.static;
                        break;
                    case '2':
                        delete values.pppoe;
                        break;
                    case '3':
                        delete values.static;
                        delete values.pppoe;
                        break;
                    default:
                        break;
                }
                values.wanPort = this.props.wanPort
                console.log(values)
                this.props.wanSet(values)
            }
        })
    }


    componentWillMount() {
        this.props.requestList(this.props.wanPortProp)
    }

    componentDidMount() {
        this.props.setWanPort(this.props.wanPortProp)
    }
}

const mapState = (state) => ({
    wanPort: state.getIn(['wan', 'wanPort']),
    formData: state.getIn(['wan', 'formData']),
    param: state.getIn(['wan', 'param']),
    connectTypeValueForWeb: state.getIn(['wan', 'connectTypeValueForWeb']),
    pppoeValidate: state.getIn(['wan', 'pppoeValidate']),
    staticIpValidate: state.getIn(['wan', 'staticIpValidate']),
    dhcpValidate: state.getIn(['wan', 'dhcpValidate']),
    enabled: state.getIn(['wan', 'enabled']),
})
const mapDispatch = (dispatch) => ({
    requestList(wanPort) {
        dispatch(actionFunc.requestList(wanPort))
    },
    handleConnectTypeChange(e) {
        dispatch(actionFunc.updateValidateField(e))
    },
    setWanPort(wanPort) {
        dispatch(actionFunc.setWanPort(wanPort))
    },
    wanSet(params) {
        dispatch(actionFunc.setParams(params))
    }
})


export default connect(mapState, mapDispatch)(Form.create()(Common))
